<template>
  <div class="form-container">
    <h2>{{ name }}</h2>
    <el-form ref="theForm" :model="values" :rules="rules" @submit.native.prevent="handleSubmit" label-width="150px">
      <template v-for="(item, key) in columns">
        <template v-if="oc(item).key()">
          <el-form-item :key="key" :prop="item.key" :rules="rules[item.key] || []" :label="item.name">
            <dashboard-form-item v-model="values[item.key]" :column="item" @get-data="handleGetData" />
          </el-form-item>
        </template>
      </template>
      <el-form-item >
        <el-button type="primary" native-type="submit" :loading="loading" :disabled="noBack && isEqual(values, defaultValues)">{{ submitName }}</el-button>
        <el-button v-if="!noBack" type="success" @click="$emit('goback', null)">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Provide, Model, Watch } from 'nuxt-property-decorator'
import { Form as ElForm } from 'element-ui'
import { Maps, Rule } from 'kenote-config-helper'
import { Channel } from '@/types/channel'
import { oc } from 'ts-optchain'
import { isEqual, cloneDeep } from 'lodash'

@Component<DashboardForm>({
  name: 'dashboard-form',
  created () {
    this.values = cloneDeep(this.defaultValues)
  }
})
export default class DashboardForm extends Vue {

  @Prop({ default: undefined }) name!: string
  @Prop({ default: false }) loading!: boolean
  @Prop({ default: {} }) rules!: Maps<Rule[]>
  @Prop({ default: {} }) defaultValues!: Maps<any>
  @Prop({ default: [] }) columns!: Channel.queryer[]
  @Prop({ default: false }) noBack!: boolean
  @Prop({ default: '提 交' }) submitName!: string

  @Provide() values: Maps<any> = {}
  @Provide() data: Maps<any> = {}

  oc = oc
  isEqual = isEqual

  handleSubmit (): void {
    let theForm = this.$refs['theForm'] as ElForm
    theForm.validate(valid => {
      if (valid) {
        this.$emit('submit', this.values)
      }
      else {
        return false
      }
    })
  }

  handleRest (): void {
    let theForm = this.$refs['theForm'] as ElForm
    theForm.resetFields()
  }

  handleGetData (api: Channel.api, next: (data: Maps<any>[]) => void): void {
    this.$emit('get-data', api, next)
  }
  
}
</script>